<template>
  <div class="edit-gender-contaniner">
      <van-picker
        show-toolbar title="选择您的性别"
        :columns="['男','女']"
        :default-index="defaultIndex"
        @cancel="handleCancel"
        @confirm="handleConfirm"/>
  </div>
</template>

<script>
import { updateUserInfo } from 'network/user'
export default {
  name: 'EditGender',
  props: {
    isShowEditGender: {
      type: Boolean,
      required: true
    },
    userInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      defaultIndex: this.userInfo.gender === 0 ? 0 : 1
    }
  },
  methods: {
    handleCancel () {
      this.$emit('update:isShowEditGender', false)
      console.log(this.defaultIndex)
    },
    async handleConfirm (value, index) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const res = await updateUserInfo({
        gender: index
      })
      console.log(res)
      this.$emit('update:isShowEditGender', false)
      this.userInfo.gender = index
      this.defaultIndex = index
      this.$toast.success('修改性别成功(＾－＾)V')
    }
  }
}
</script>

<style scoped>

</style>
